<template>
  <div
    class="all"
    :style="{ height: screenHeight + 'px', width: screenWidth + 'px' }"
  >
    <div class="top" @click="returnTap">取消</div>
    <div class="logo_img">
      <h2 style="color: white; margin: 10px 0">用手机号注册</h2>
      <img
        style="border-radius: 24px"
        src="../../assets/images/logo.png"
        alt=""
      />
    </div>
    <div class="list">
      <div>名称</div>
      <input type="text" v-model="name" placeholder="请输入名称" />
      <van-icon @click="deteleTap" name="cross" class="iron" color="#fff" />
    </div>
    <div class="list">
      <div>国家/地区</div>
      <input type="text" v-model="city" placeholder="国家地区" disabled />
      <van-icon
        name="arrow"
        @click="cityTap"
        style="font-size: 22px"
        color="#bbbbbb"
      />
    </div>
    <div class="list">
      <div>+86</div>
      <input type="text" v-model="phone" placeholder="请输入手机号" />
      <div style="width: 30px"></div>
    </div>
    <div class="list">
      <div>密码</div>
      <input
        :type="show ? 'password' : 'text'"
        v-model="possword"
        placeholder="请输入密码"
      />
      <van-icon
        v-if="show"
        @click="passwordtap(false)"
        style="font-size: 22px"
        name="eye-o"
        color="#bbbbbb"
      />
      <van-icon
        v-show="!show"
        @click="passwordtap(true)"
        style="font-size: 22px"
        name="closed-eye"
        color="#bbbbbb"
      />
    </div>
    <div class="msg">
      <van-checkbox class="checkbox" v-model="checked"
        >我已阅读并同意
      </van-checkbox>
      <span @click="dealTap" style="color: #586686"
        >《软件许可及服务协议》</span
      >
    </div>
    <van-button class="button" size="large" type="default" @click="nextTap"
      >下一步</van-button
    >
    <van-popup v-model="cityshow" position="bottom">
      <van-area
          ref="area"
          value="110000"
          :area-list="areaList"
          @change="onChange"
          @confirm="show = false"
          @cancel="show = false"
          title="地区选择"
        />
        	<!-- <van-address-edit :area-list="areaList" show-postal show-set-default show-search-result :search-result="searchResult" @save="onSave" @change-detail="onChangeDetail"></van-address-edit> -->

  
        
      <!-- <van-area :area-list="areaList" title="地区选择"  :columns-num="2" ref="myArea"  @change="onChange" @confirm="onConfirm" @cancel="onCancel" /> -->
    </van-popup>
  </div>
</template>
<script>
import { Popup } from "vant";
import { Toast } from "vant";
import { Area } from "vant";
import areaList from "../../../static/js/area.js"
export default {
  data() {
    return {
      // areaList,
       areaList: [],
      name: "",
      city: "",
      phone: "",
      possword: "",
      show: true,
      checked: true,
      screenWidth: window.innerWidth,
      screenHeight: window.innerHeight,
      cityshow: false,
      areaList: [],
    };
  },
  created(){
console.log(areaList)
  },
  methods: {
    onChange(){
       console.log('当前值：' + value + '当前索引：' + index)
        console.log(value)
        let areaName = ''
        for (var i = 0; i < value.length; i++) {
          areaName = areaName + value[i].name + ' '
        }
        this.carmodel = areaName
      
    },
    deteleTap() {
      this.name = "";
    },
    passwordtap(row) {
      console.log(row);
      this.show = row;
    },
    dealTap() {
      this.$router.push("/deal");
    },
    returnTap() {
      this.$router.go(-1);
    },
    cityTap() {
      console.log(1111);
      this.cityshow = true;
      console.log(this.cityshow)
    },
    nextTap() {
      if (this.phone === "") {
        Toast.fail("请输入手机号");
      } else {
        if (
          !/^((1[3,5,8,7,9][0-9])|(14[5,7])|(17[0,6,7,8])|(19[1,7]))\d{8}$/.test(
            this.phone
          )
        ) {
          Toast.fail("手机号格式不对");
        }
      }
      if (this.possword === "") {
        Toast.fail("请输入密码");
      }
    },
  },
};
</script>
<style scoped>
.all {
  background: #4ac7d7;
}
input {
  border: none;
  background: none;
  color: white;
  font-size: 15px;
}
input::-webkit-input-placeholder {
  color: #fff;
}
.top {
  margin-left: 3%;
  padding-top: 20px;
  color: #fff;
}
.logo_img {
  width: 100%;
  margin-top: 10%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.logo_img img {
  width: 100px;
}
.iron {
  border: 1px solid #bbbbbb;
  background: #bbbbbb;
  border-radius: 50%;
}
.list {
  width: 90%;
  margin-left: 5%;
  margin-top: 10px;
  padding: 10px 0;
  border-bottom: 1px solid #cfcfcf;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.list input {
  border: none;
}
.list div {
  width: 25%;
  font-size: 18px;
  color: white;
}
.msg {
  text-align: center;
  margin-top: 20px;
  font-size: 15px;
  display: flex;
  justify-content: center;
}
.button {
  margin-top: 20px;
  width: 90%;
  margin-left: 5%;
}
</style>